<template>
  <div>
    <Navigation></Navigation>
    <div class="center">
      <video :src="video.video_url"  width="100%" height="80%" controls>
        <source :src="video.video_url"
                type="video/mp4">
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</template>

<script>
import {VideoApi} from "@/api/video_api";
import Navigation from "@/components/navigation/Navigation";

export default {
  name: "VideoDetail",
  components: {Navigation},
  data() {
    return {
      video: {},
    }
  },
  created() {
    let api = new VideoApi()
    let outer = this
    api.get(outer.$route.params.video_id).then(
        res => outer.video = res.data.videos[0]
    )
  }
}
</script>

<style scoped>
.center {
  margin: 20px auto;
  width: 900px;
  height: 700px;
  border: solid 1px;
}
</style>